<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_自定义JS对象</title>
</head>
<body>
<table border="1px">
    <caption>商品表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    //定义数组，用来模拟从服务器获取到商品数据
    let productArr=[
        {title:'小米14',price:8000,num:200},
        {title:'华为Mate60',price:5000,num:100},
        {title:'苹果16',price:10000,num:700},
        {title:'魅族',price:2000,num:500}
    ];
    //1.获取表格对象
    let table=document.querySelector('table');
    //2.遍历商品数组，数组中有几条数据，表格就有几行
    for (let i=0;i<productArr.length;i++){
        //循环n次，就生成n个tr与3*n个td
        let tr=document.createElement('tr');
        let titleTd=document.createElement('td');
        let priceTd=document.createElement('td');
        let numTd=document.createElement('td');
        //4.将当前遍历到的商品属性依次装入单元格里
        titleTd.innerHTML=productArr[i].title;
        priceTd.innerHTML=productArr[i].price;
        numTd.innerHTML=productArr[i].num;
        //5.将准备好的td装入tr中
        tr.append(titleTd,priceTd,numTd);
        //6.将tr装入table中
        table.append(tr);
    }
    //1.定义一个自带属性与方法的JS对象
    let p1={
        name:'张三',
        age:18,
        say:function (){
            console.log('我是'+this.name+',今年'+this.age+'岁了');
        }
    };
    console.log(p1);
    console.log(p1.name);
    console.log(p1.age);
    p1.say();
    //2.先定义一个空对象，再动态给对象设置属性和方法
    let p2={};
    p2.name='李四';
    p2.age=20;
    p2.say=function (){
        console.log('我是'+this.name+',今年'+this.age+'岁了');
    };
    console.log(p2);
    console.log(p2.name);
    console.log(p2.age);
    p2.say();
</script>
</body>
</html>